<!DOCTYPE html>
<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Ghostclick</title>
  <meta name="viewport" content="width=device-width, user-scalable=no">
  <script src="../../polymer-gestures.js"></script>
  <style>
    #box {
      height: 200px;
      width: 200px;
      background: gray;
    }
    #input {
      height: 200px;
      width: 200px;
    }
    #result {
      z-index: 1;
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }
    #result.fail {
      background: red;
    }
    #result.pass{
      background: green;
    }
  </style>
</head>
<body>
  <pre>Tap the gray box with touch. If the screen turns green, the test passed. If it turns red, the test failed.</pre>
  <div id="box" onclick=""></div>
  <input id="input" value="hi">
  <script>
    result = document.createElement('div');
    result.id = 'result';

    function pass() {
      if (!result.parentNode) {
        document.body.appendChild(result);
      }
      result.className = 'pass';
    }
    function fail() {
      if (!result.parentNode) {
        document.body.appendChild(result);
      }
      result.className = 'fail';
    }

    pgae = PolymerGestures.addEventListener.bind(PolymerGestures);
    var box = document.getElementById('box');
    var ta = document.getElementById('input');

    var passTimeout;
    pgae(box, 'tap', function(ev) {
      document.body.removeChild(box);
      passTimeout = setTimeout(pass, 1000);
    });

    input.addEventListener('focus', function() {
      clearTimeout(passTimeout);
      fail();
    });

    input.addEventListener('click', function() {
      clearTimeout(passTimeout);
      fail();
    });

  </script>
</body>
</html>
